<template>
  <div>
    <van-search
      v-model="value"
      show-action
      label="首页"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-grid :gutter="10">
      <van-grid-item
        v-for="value in 8"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      商品
    </van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
        <van-cell v-for="(item, index) in list" :key="index">
          <dl>
            <dt><img :src="item.img" alt=""></dt>
            <dd>
              <h6>{{item.title}}</h6>
              <p><b>￥{{item.money}}</b></p>
            </dd>
          </dl>
        </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
      listData: [],
      page: 1,
    };
  },
  created() {
    this.$store.dispatch("getIndexData");
    this.listData = this.$store.state.indexData[0].info;
    // console.log(this.listData,"================================");
    // this.list = this.listData
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 渲染数据 从 原数据中截取十条数据
        this.list = this.listData.slice(0, this.page * 5);
        this.page++;
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.listData.length) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>